@import url("constant.less");

body,page {
	background-color: #f3f3f3;
	font-size: @hbie-font-size-base;
	color: @hbie-text-color;
	font-family: PingFang-SC-Medium,Helvetica Neue, Helvetica, sans-serif;
	line-height: 1.8;
	height:100%
}
progress, checkbox-group{
	width: 100%;
}
form {
	width: 100%;
}
view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
	box-sizing: border-box;
}

.round {
    border-radius:9000rpx
}
.circle{
    border-radius: @hbie-border-radius-circle;
    
}

.radius {
	border-radius: @hbie-border-radius-base;
}
.page,.page__bd {
		height: 100vh;
	}

/*=====================

图片 begin

======================*/
image {
	max-width: 100%;
	display: inline-block;
	position: relative;
	z-index: 0;
}


.response {
	width: 100%;
}

/* ==================
          按钮
 ==================== */

.hb-btn {
	position: relative;
	border: 0rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	font-size: 28rpx;
	height: 64rpx;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin-left: initial;
	transform: translate(0rpx, 0rpx);
	margin-right: initial;
}

.hb-btn::after {
	display: none;
}

.hb-btn:not([class*="hb-btn_"]) {
	background-color: #f0f0f0;
}

.hb-btn[class*="line-"] {
	background-color: transparent;
}

.hb-btn[class*="line-"]::after {
	content: " ";
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	border: 1rpx solid currentColor;
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: 12rpx;
	z-index: 1;
	pointer-events: none;
}

.hb-btn.round[class*="line-"]::after {
	border-radius: 1000rpx;
}

.hb-btn[class*="lines"]::after {
	border: 6rpx solid currentColor;
}

.hb-btn[class*="hb-btn_"]::after {
	display: none;
}

.hb-btn.sm {
	padding: 0 20rpx;
	font-size: 20rpx;
	height: 48rpx;
}

.hb-btn.lg {
	padding: 0 40rpx;
	font-size: 32rpx;
	height: 80rpx;
}

.hb-btn.hb-icon.sm {
	width: 48rpx;
	height: 48rpx;
	font-size: 26rpx;
}

.hb-btn.hb-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 500rpx;
	padding: 0;
	font-size: 32rpx;
}

button.hb-icon.lg {
	width: 80rpx;
	height: 80rpx;
	font-size: 38rpx;
}

.hb-btn.shadow-blur::before {
	top: 4rpx;
	left: 4rpx;
	filter: blur(6rpx);
	opacity: 0.6;
}

.hb-btn.button-hover {
	transform: translate(1rpx, 1rpx);
}

.block {
	display: block;
}

.hb-btn.block {
	display: flex;
}

.hb-btn[disabled] {
	opacity: 0.6;
	color: #fff;
}

.hb-btn_success{
    background-color: @hbie-color-success;
    color:@hbie-text-color-inverse;
}
.hb-btn_success[disabled]{
	color: #fff !important;
	background-color: #b3e19d !important;
	border-color: #b3e19d !important;	
	background-image: none;
	opacity: 10;
}
.hb-btn_error{
    background-color: @hbie-color-error;
    color:@hbie-text-color-inverse;
}
.hb-btn_error[disabled]{
	color: #fff !important;
	background-color: #fab6b6 !important;
	    border-color: #fab6b6 !important;
	background-image: none;
	opacity: 10;
}
.hb-btn_warning{
    background-color: #f37b1d;
    color:@hbie-text-color-inverse;
}
.hb-btn_warning[disabled]{
	color: #fff !important;
	    background-color: #f3d19e !important;
	    border-color: #f3d19e !important;
		background-image: none;
		opacity: 10;
}
.hb-btn_primary{
    background-color: @hbie-color-primary;
    color:@hbie-text-color-inverse;
}
.hb-btn_primary[disabled]{
	color: #fff !important;
   background-color: #a0cfff !important;
   border-color: #a0cfff !important;
	background-image: none;
	opacity: 10;
}
.hb-btn_info{
    background-color: @hbie-color-info;
    color:@hbie-text-color-inverse;
}
.hb-btn_default{
    background-color: @hbie-color-white;
    color:@hbie-text-color;
}

.shadow[class*="-btn_default"] {
	box-shadow:0 1rpx 6rpx rgba(26,26,26,0.2);
}
.shadow[class*="-btn_success"] {
	box-shadow:0 1rpx 6rpx rgba(48,156,63,0.2);
}

/*================
操作条
==================*/

.hb-bar{
    display: flex;
    position: relative;
    align-items: center;
    min-height: 100rpx;
    justify-content: space-between;
    .action{
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
        max-width: 100%;
    }
    .action:first-child{
        margin-left: 30rpx;
        font-size: @hbie-font-size-lg;
    }
    .action:first-child>text[class*="hb-icon_"]{
        margin-left: -0.3em;
        margin-right: 0.3em;
    }
    .action:last-child {
    	margin-right: 30rpx;
    }
    .action>text[class*="hb-icon_"],.action>view[class*="hb-icon_"]{
        font-size: @hbie-font-size-lg;
    }
}
/* ==================
          标签/徽章
 ==================== */
.hb-tag{
     font-size: @hbie-font-size-xs;
     vertical-align: middle;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     padding: 0rpx 16rpx;
     height: 48rpx;
     white-space: normal;
}
.hb-tag:not([class*="bg-"]):not([class*="line-"]){
    background-color: #f1f1f1;
}
.hb-tag[class*="line-"]::after{
     content: " ";
     width:200%;
     height:200%;
     position:absolute;
     top:0;
     left:0;
     border:1rpx solid currentColor;
     transform:scale(0.5);
     transform-origin:0 0;
     box-sizing:border-box;
     border-radius:inherit;
     z-index:1;
     pointer-events:none;
}
.hb-tag+.hb-tag{
    margin-left: 10rpx;
}
.hb-tag.sm{
     font-size: 20rpx;
     padding:0rpx 12rpx;
     height: 32rpx;
}
.hb-capsule+.hb-capsule{
    margin-left:10rpx
}
.hb-capsule{
     display: inline-flex;
     vertical-align: middle;
     .hb-tag{
         margin:0
     }
     .hb-tag[class*="line-"]:first-child::after{
         border-right: 0rpx solid transparent;
     }
     .hb-tag[class*="line-"]:last-child::after{
         border-left: 0rpx solid transparent;
     }
}
.hb-capsule.radius{
 .hb-tag:first-child{
     border-top-left-radius: 6rpx;
     border-bottom-left-radius: 6rpx;
 }
 .hb-tag:last-child::after,.hb-tag[class*="line-"] {
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
 }
}
.hb-capsule.round{
 .hb-tag:first-child{
     border-top-left-radius: 200rpx;
     border-bottom-left-radius:200rpx;
     text-indent: 4rpx;
 }
 .hb-tag:last-child::after,.hb-tag:last-child {
    border-top-right-radius: 200rpx;
    border-bottom-right-radius: 200rpx;
    text-indent: -4rpx;
 }
}
.hb-tag.badge{
 border-radius:200rpx;
 position: absolute;
 top: -10rpx;
 right: -10rpx;
 font-size: 20rpx;
 padding:0rpx 10rpx;
 height: 28rpx;
 color:#fff;
}
.hb-tag.badge:not([class*="bg-"]){
  background-color: #dd514c;
}
.hb-tag:empty:not([class*="hb-icon_"]){
  padding:0rpx;
  width: 16rpx;
  height: 16rpx;
  top:-4rpx;
  right:-4rpx
}
.hb-tag[class*="hb-icon_"]{
    width: 32rpx;
    height:32rpx;
    top:-4rpx;
    right:-4rpx;
}
/*===============
        头像
===================*/
.hb-avatar{
	font-variant: small-caps;
	margin: 0;
	padding: 0;
	display: inline-flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	background-color: #ccc;
	color: #ffffff;
	white-space: nowrap;
	position: relative;
	width: 64rpx;
	height: 64rpx;
	background-size: cover;
	background-position: center;
	vertical-align: middle;
	font-size: 1.5em;
}
.hb-avatar.sm{
    width: 48rpx;
    height:48rpx;
    font-size: 1em;
}
.hb-avatar.lg{
    width: 96rpx;
    height:96rpx;
    font-size: 2em;
}
.hb-avatar.xl{
    width: 128rpx;
    height:128rpx;
    font-size: 2.5em;
}
.hb-avatar.xxl{
    width: 154rpx;
    height:154rpx;
    font-size: 3em;
}
.hb-avatar_group{
    /*文本书写方向“从右向左”*/
    direction: rtl;
    /*这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行*/
    unicode-bidi: bidi-override;
    padding:0 10rpx 0 40rpx;
    display: inline-block;
    .hb-avatar{
        margin-left: -30rpx;
        border:1px solid #F1F1F1;
        vertical-align: middle;
    }
    .hb-avatar.sm{
        margin-left:-20rpx;
        border:1px solid #F1F1F1;
    }
}
/* ==================
          导航栏
 ==================== */
 .hb-nav{
     white-space: normal;
     .hb-item{
         height: 90rpx;
         display: inline-block;
         line-height: 90rpx;
         margin: 0 10rpx;
         padding:0 20rpx;
     }
     .hb-item.cur{
         border-bottom: 4rpx solid;
     }
 }
 ::-webkit-scrollbar {
 	display: none;
 }
 /* ==================
           表单
  ==================== */
.form-group{
     background-color: @hbie-color-white;
     padding:1rpx 30rpx;
     display: flex;
     align-items: center;
     min-height: 100rpx;
     justify-content: space-between;
     .title{
         text-align: justify;
         padding-right: @hbie-font-size-lg;
         font-size: @hbie-font-size-lg;
         position: relative;
         height: 60rpx;
         line-height: 60rpx;
         min-width: calc(4em + 15rpx);
     }
     .title.required::after{
         content: "\00A0*";
         color:#dd514c;
         position: absolute;
         top:6rpx
     }
     .value,input{
         flex: 1;
         font-size: @hbie-font-size-lg;
         color:#555;
         padding-right: 20rpx;
     }
     picker,.picker{
         flex:1;
         padding-right: 40rpx;
         overflow: hidden;
         position: relative;
     }
     .picker .picker-title{
         line-height: 100rpx;
         font-size:@hbie-font-size-base;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         width: 100%;
         text-align: right;
     }
     .picker::after {
     	font-family: iconfont;
     	display: block;
     	content: "\e743";
     	position: absolute;
     	font-size: 34rpx;
     	color: #8799a3;
     	line-height: 100rpx;
     	width: 60rpx;
     	text-align: center;
     	top: 0;
     	bottom: 0;
     	right: -20rpx;
     	margin: auto;
     }
     
     textarea{
         margin:32rpx 0 30rpx;
         height:4.6em;
         width:100%;
         line-height: 28rpx;
         padding:0;
     }
     textarea[disabled],textarea[disabled] .placeholder{
         color:transparent
     }
     .radio+.radio,.checkbox+.checkbox{
         margin-left:10rpx
     }
     .body {
         align-items: center;
         width: 100%;
         margin: 16px 0 15px;
         textarea{margin:0}
     }
     .word-limit{
         margin-top: 4rpx;
         color: #646566;
         font-size: 24rpx;
         line-height: 16rpx;
         text-align: right;
     }
}
.form-group+.form-group{
    border-top: 1rpx solid #f0f0f0;
}
.form-group>text[class*="hb-icon_"]{
    font-size: @hbie-font-size-xl;
    padding:0;
    box-sizing: border-box;
}
 .form-group.align-start .title{
     height: 1em;
     margin-top: 32rpx;
     line-height: 1em;
 }
 /* ==================
           步骤条
  ==================== */
 
 .hb-steps {
 	display: flex;
 }
 
 scroll-view.hb-steps {
 	display: block;
 	white-space: nowrap;
 }
 
 scroll-view.hb-steps .hb-steps__item {
 	display: inline-block;
 }
 .hb-steps{
	 &__item{
		 flex: 1;
		 text-align: center;
		 position: relative;
		 min-width: 100rpx;
		 &:not([class*="text-"]) {
		 	color: #8799a3;
		 }
		 & [class*="hb-icon_"],
		 & .num {
		 	display: block;
		 	font-size: 40rpx;
		 	line-height: 80rpx;
		 }
	 }
	 &__item::before,
	 &__item::after,
	 &.steps-arrow &__item::before,
	 &.steps-arrow &__item::after {
	 	content: "";
	 	display: block;
	 	position: absolute;
	 	height: 0px;
	 	width: calc(100% - 80rpx);
	 	border-bottom: 1px solid #ccc;
	 	left: calc(0px - (100% - 80rpx) / 2);
	 	top: 40rpx;
	 	z-index: 0;
	 }
	 &.steps-arrow &__item::before,
	 &.steps-arrow &__item::after {
	 	content: "\e743";
	 	font-family: 'iconfont';
	 	height: 30rpx;
	 	border-bottom-width: 0px;
	 	line-height: 30rpx;
	 	top: 0;
	 	bottom: 0;
	 	margin: auto;
	 }
	 &.steps-bottom &__item::before,
	 &.steps-bottom &__item::after {
	 	bottom: 40rpx;
	 	top: initial;
	 }
	 &__item::after {
	 	border-bottom: 1px solid currentColor;
	 	width: 0px;
	 	transition: all 0.3s ease-in-out 0s;
	 }
	 
	 &__item[class*="text-"]::after {
	 	width: calc(100% - 80rpx);
	 	color: currentColor;
	 }
	 
	
	 
	 &__item .num {
	 	width: 40rpx;
	 	height: 40rpx;
	 	border-radius: 50%;
	 	line-height: 40rpx;
	 	margin: 20rpx auto;
	 	font-size: 24rpx;
	 	border: 1px solid currentColor;
	 	position: relative;
	 	overflow: hidden;
	 }
	 
	 &__item[class*="text-"] .num {
	 	background-color: currentColor;
	 }
	 
	 &__item .num::before,
	 &__item .num::after {
	 	content: attr(data-index);
	 	position: absolute;
	 	left: 0;
	 	right: 0;
	 	top: 0;
	 	bottom: 0;
	 	margin: auto;
	 	transition: all 0.3s ease-in-out 0s;
	 	transform: translateY(0rpx);
	 }
	 
	 &__item[class*="text-"] .num::before {
	 	transform: translateY(-40rpx);
	 	color: #fff;
	 }
	 
	 &__item .num::after {
	 	transform: translateY(40rpx);
	 	color: #fff;
	 	transition: all 0.3s ease-in-out 0s;
	 }
	 
	 &__item[class*="text-"] .num::after {
	 	content: "\e618";
	 	font-family: 'iconfont';
	 	color: #fff;
	 	transform: translateY(0rpx);
	 }
	 
	 &__item[class*="text-"] .num.err::after {
	 	content: "\e610";
	 }
	 
 }
  .hb-steps{
	& &__item:first-child::before,
	& &__item:first-child::after {
		display: none;
	 }
 }

 /* ==================
           顶部提示框
  ==================== */
 .hb-toptips {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 10000;
     min-height: 50rpx;
     line-height: 50rpx;
     width: 100%;
 
     &__content {
         padding: 10rpx;
         font-size: 28rpx;
         color: #fff;
         word-wrap: break-word;
         word-break: break-all;
         text-align: center;
         transition: background-color .3s;
 
 
         &--sucess {
             background-color: #80c26a;
         }
 
         &--info {
             background-color: #0e86ff;
         }
 
         &--warn {
             background-color: #f37b1d;
         }
 
         &--error {
             background-color: #ef473a;
         }
     }
 
     &__content>text[class*="hb-icon_"] {
         font-size: 36rpx;
         line-height: 36rpx;
         margin-top: 6rpx;
         margin-right: 6rpx;
     }
 }
.hb-toptips.status{padding-top:88rpx}
.hb-toptips.transparent{padding-top: calc(var(88) + 88rpx);}
.hb-toptips.transparentH5{top:88rpx}
.hb-toptips.toptips-show {display: block;}
.hb-toptips.toptips-hide {display: none;}
/* ==================
          边框
 ==================== */
 
 .solid,.solid-gray,
 .solid-top,.solid-top_gray,
 .solid-right,.solid-right_gray,
 .solid-bottom,.solid-bottom_gray,
 .solid-left,.solid-left_gray,
 .solids,
 .solids-top,
 .solids-right,
 .solids-bottom,
 .solids-left,
 .dashed,
 .dashed-top,
 .dashed-right,
 .dashed-bottom,
 .dashed-left {
 	position: relative;
 }
 
 .solid::after,
 .solid-top::after,
 .solid-right::after,
 .solid-bottom::after,
 .solid-left::after,
 .solids::after,
 .solids-top::after,
 .solids-right::after,
 .solids-bottom::after,
 .solids-left::after,
 .dashed::after,
 .dashed-top::after,
 .dashed-right::after,
 .dashed-bottom::after,
 .dashed-left::after {
 	content: " ";
 	width: 200%;
 	height: 200%;
 	position: absolute;
 	top: 0;
 	left: 0;
 	border-radius: inherit;
 	transform: scale(0.5);
 	transform-origin: 0 0;
 	pointer-events: none;
 	box-sizing: border-box;
 }
 /*-----细线------*/
 .solid::after {
 	border: 1rpx solid rgba(0, 0, 0, 0.1);
 }
 
 .solid-top::after {
 	border-top: 1rpx solid rgba(0, 0, 0, 0.1);
 }
 
 .solid-right::after {
 	border-right: 1rpx solid rgba(0, 0, 0, 0.1);
 }
 
 .solid-bottom::after {
 	border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
 }
 
 .solid-left::after {
 	border-left: 2rpx solid rgba(0, 0, 0, 0.1);
 }
 .solid-gray {
 	border: 1rpx solid #f0f0f0;
 }
 
 .solid-top_gray {
 	border-top: 1rpx solid #f0f0f0;
 }
 
 .solid-right_gray {
 	border-right: 1rpx solid #f0f0f0;
 }
 
 .solid-bottom_gray {
 	border-bottom: 1rpx solid #f0f0f0;
 }
 
 .solid-left_gray {
 	border-left: 1rpx solid #f0f0f0;
 }
 /*----------粗实线----------*/
 .solids::after {
 	border: 8rpx solid @hbie-text-color-line;
 }
 
 .solids-top::after {
 	border-top: 8rpx solid @hbie-text-color-line;
 }
 
 .solids-right::after {
 	border-right: 8rpx solid @hbie-text-color-line;
 }
 
 .solids-bottom::after {
 	border-bottom: 8rpx solid @hbie-text-color-line;
 }
 
 .solids-left::after {
 	border-left: 8rpx solid @hbie-text-color-line;
 }
 
 /* -- 虚线 -- */
 
 .dashed::after {
 	border: 1rpx dashed #ddd;
 }
 
 .dashed-top::after {
 	border-top: 1rpx dashed #ddd;
 }
 
 .dashed-right::after {
 	border-right: 1rpx dashed #ddd;
 }
 
 .dashed-bottom::after {
 	border-bottom: 1rpx dashed #ddd;
 }
 
 .dashed-left::after {
 	border-left: 1rpx dashed #ddd;
 }
 
 /* -- 阴影 -- */
 
 .shadow[class*='white'] {
 	box-shadow: 0 1rpx 6rpx;
 }
 
 .shadow-lg {
 	box-shadow: 0rpx 40rpx 100rpx 0rpx;
 }
 
 .shadow-warp {
 	position: relative;
 	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
 }
 
 .shadow-warp:before,
 .shadow-warp:after {
 	position: absolute;
 	content: "";
 	top: 20rpx;
 	bottom: 30rpx;
 	left: 20rpx;
 	width: 50%;
 	box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
 	transform: rotate(-3deg);
 	z-index: -1;
 }
 
 .shadow-warp:after {
 	right: 20rpx;
 	left: auto;
 	transform: rotate(3deg);
 }
 
 .shadow-blur {
 	position: relative;
 }
 
 .shadow-blur::before {
 	content: "";
 	display: block;
 	background: inherit;
 	filter: blur(10rpx);
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	top: 10rpx;
 	left: 10rpx;
 	z-index: -1;
 	opacity: 0.4;
 	transform-origin: 0 0;
 	border-radius: inherit;
 	transform: scale(1, 1);
 }

/*  -- 内外边距 -- */

.margin-xs {
	margin: 10rpx;
}

.margin-sm {
	margin: 20rpx;
}

.margin {
	margin: 30rpx;
}

.margin-lg {
	margin: 40rpx;
}

.margin-xl {
	margin: 50rpx;
}

.margin-top-xs {
	margin-top: 10rpx;
}

.margin-top-sm {
	margin-top: 20rpx;
}

.margin-top {
	margin-top: 30rpx;
}

.margin-top-lg {
	margin-top: 40rpx;
}

.margin-top-xl {
	margin-top: 50rpx;
}

.margin-right-xs {
	margin-right: 10rpx;
}

.margin-right-sm {
	margin-right: 20rpx;
}

.margin-right {
	margin-right: 30rpx;
}

.margin-right-lg {
	margin-right: 40rpx;
}

.margin-right-xl {
	margin-right: 50rpx;
}

.margin-bottom-xs {
	margin-bottom: 10rpx;
}

.margin-bottom-sm {
	margin-bottom: 20rpx;
}

.margin-bottom {
	margin-bottom: 30rpx;
}

.margin-bottom-lg {
	margin-bottom: 40rpx;
}

.margin-bottom-xl {
	margin-bottom: 50rpx;
}

.margin-left-xs {
	margin-left: 10rpx;
}

.margin-left-sm {
	margin-left: 20rpx;
}

.margin-left {
	margin-left: 30rpx;
}

.margin-left-lg {
	margin-left: 40rpx;
}

.margin-left-xl {
	margin-left: 50rpx;
}

.margin-lr-xs {
	margin-left: 10rpx;
	margin-right: 10rpx;
}

.margin-lr-sm {
	margin-left: 20rpx;
	margin-right: 20rpx;
}

.margin-lr {
	margin-left: 30rpx;
	margin-right: 30rpx;
}

.margin-lr-lg {
	margin-left: 40rpx;
	margin-right: 40rpx;
}

.margin-lr-xl {
	margin-left: 50rpx;
	margin-right: 50rpx;
}

.margin-tb-xs {
	margin-top: 10rpx;
	margin-bottom: 10rpx;
}

.margin-tb-sm {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}

.margin-tb {
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}

.margin-tb-lg {
	margin-top: 40rpx;
	margin-bottom: 40rpx;
}

.margin-tb-xl {
	margin-top: 50rpx;
	margin-bottom: 50rpx;
}


.padding-xs {
	padding: 10rpx;
}

.padding-sm {
	padding: 20rpx;
}

.padding {
	padding: 30rpx;
}

.padding-lg {
	padding: 40rpx;
}

.padding-xl {
	padding: 50rpx;
}

.padding-top-xs {
	padding-top: 10rpx;
}

.padding-top-sm {
	padding-top: 20rpx;
}

.padding-top {
	padding-top: 30rpx;
}

.padding-top-lg {
	padding-top: 40rpx;
}

.padding-top-xl {
	padding-top: 50rpx;
}

.padding-right-xs {
	padding-right: 10rpx;
}

.padding-right-sm {
	padding-right: 20rpx;
}

.padding-right {
	padding-right: 30rpx;
}

.padding-right-lg {
	padding-right: 40rpx;
}

.padding-right-xl {
	padding-right: 50rpx;
}

.padding-bottom-xs {
	padding-bottom: 10rpx;
}

.padding-bottom-sm {
	padding-bottom: 20rpx;
}

.padding-bottom {
	padding-bottom: 30rpx;
}

.padding-bottom-lg {
	padding-bottom: 40rpx;
}

.padding-bottom-xl {
	padding-bottom: 50rpx;
}

.padding-left-xs {
	padding-left: 10rpx;
}

.padding-left-sm {
	padding-left: 20rpx;
}

.padding-left {
	padding-left: 30rpx;
}

.padding-left-lg {
	padding-left: 40rpx;
}

.padding-left-xl {
	padding-left: 50rpx;
}

.padding-lr-xs {
	padding-left: 10rpx;
	padding-right: 10rpx;
}

.padding-lr-sm {
	padding-left: 20rpx;
	padding-right: 20rpx;
}

.padding-lr {
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.padding-lr-lg {
	padding-left: 40rpx;
	padding-right: 40rpx;
}

.padding-lr-xl {
	padding-left: 50rpx;
	padding-right: 50rpx;
}

.padding-tb-xs {
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}

.padding-tb-sm {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

.padding-tb {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
}

.padding-tb-lg {
	padding-top: 40rpx;
	padding-bottom: 40rpx;
}

.padding-tb-xl {
	padding-top: 50rpx;
	padding-bottom: 50rpx;
}

.padding-0 {
	padding: 0!important;
}
.padding-top-0 {
	padding-top: 0!important;
}
.padding-bottom-0 {
	padding-bottom: 0!important;
}
.padding-right-0 {
	padding-right: 0!important;
}
.padding-left-0 {
	padding-left: 0!important;
}
.margin-0 {
	margin: 0!important;
}
.margin-top-0 {
	margin-top: 0!important;
}
.margin-bottom-0 {
	margin-bottom: 0!important;
}
.margin-right-0 {
	margin-right: 0!important;
}
.margin-left-0 {
	margin-left: 0!important;
}
/* -- 浮动 --  */

.clearfix::after,
.clearfix::before {
	content: " ";
	display: table;
}

.clearfix::after {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}


/* ==================
          布局
 ==================== */

/*  -- flex弹性布局 -- */

.flex {
	display: flex;
}

.basis-xs {
	flex-basis: 20%;
}

.basis-sm {
	flex-basis: 40%;
}

.basis-df {
	flex-basis: 50%;
}

.basis-lg {
	flex-basis: 60%;
}

.basis-xl {
	flex-basis: 80%;
}
.basis-full{
    flex-basis: 100%;
}

.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

.flex-direction {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.self-stretch {
	align-self: stretch;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}
.vertical-center{
	display: flex;
	align-items: center;
	justify-content: center;
}
.text-vertical{
    align-items:center;       //子元素垂直居中
    display:-webkit-flex;
}
/*-------grid布局---------*/
.grid{
    display: flex;
    flex-wrap: wrap;
}
.grid.grid-square{
    overflow: hidden;
    .hb-tag{
        position: absolute;
        right:0;
        top:0;
        border-bottom-left-radius: 6rpx;
        padding:6rpx 12rpx;
        height:auto;
        background-color: rgba(0,0,0,0.5);
    }
}

.grid.grid-square>view{
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 6rpx;
    position: relative;
}
.grid.grid-square>view>text[class*="hb-icon_"]{
    font-size:52rpx;
    position: absolute;
    color:#8799a3;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.grid.col-1.grid-square>view {
	padding-bottom: 100%;
	height: 0;
	margin-right: 0;
}
.grid.grid-square>view.bg-img image {
	width: 100%;
	height: 100%;
	position: absolute;
}
.grid.col-2.grid-square>view {
	padding-bottom: calc((100% - 20rpx)/2);
	height: 0;
	width: calc((100% - 20rpx)/2);
}

.grid.col-3.grid-square>view {
	padding-bottom: calc((100% - 40rpx)/3);
	height: 0;
	width: calc((100% - 40rpx)/3);
}

.grid.col-4.grid-square>view {
	padding-bottom: calc((100% - 60rpx)/4);
	height: 0;
	width: calc((100% - 60rpx)/4);
}

.grid.col-5.grid-square>view {
	padding-bottom: calc((100% - 80rpx)/5);
	height: 0;
	width: calc((100% - 80rpx)/5);
}

.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n) {
	margin-right: 0;
}

.grid.col-1>view{
    width: 100%;
}
.grid.col-2>view{
    width: 50%;
}
.grid.col-3>view{
    width:33.33%
}
.grid.col-4>view{
    width: 25%;
}
.grid.col-5>view{
    width: 20%;
}
/*======================
        文本溢出，省略号
=======================*/
.multi-ellipsis(@lines) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: @lines;

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

.ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hb-ellipsis {
  .ellipsis();
}

.hb-multi-ellipsis--l2 {
  .multi-ellipsis(2);
}

.hb-multi-ellipsis--l3 {
  .multi-ellipsis(3);
}
/*======================
        列表
=======================*/
.grayscale{
    filter: grayscale(1);
}
.hb-list+.hb-list{
    margin-top:30rpx;
}
.hb-list>.hb-list__item{
    transition: all .6s ease-in-out 0s;
    transform: translateX(0rpx)
}

.hb-list>.hb-list__item.move-cur {
	transform: translateX(-260rpx)
}

.hb-list>.hb-list__item .move {
	position: absolute;
	right: 0;
	display: flex;
	width: 260rpx;
	height: 100%;
	transform: translateX(100%)
}

.hb-list>.hb-list__item .move view {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center
}

.hb-list.menu-avatar {
	overflow: hidden;
}

.hb-list.menu-avatar>.hb-list__item {
	position: relative;
	display: flex;
	padding-right: 10rpx;
	height: 140rpx;
	background-color: #ffffff;
	justify-content: flex-end;
	align-items: center
}

.hb-list.menu-avatar>.hb-list__item>.hb-avatar {
	position: absolute;
	left: 30rpx
}

.hb-list.menu-avatar>.hb-list__item .flex .text-cut {
	max-width: 510rpx
}

.hb-list.menu-avatar>.hb-list__item .content {
	position: absolute;
	left: 146rpx;
	width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
	line-height: 1.6em;
}

.hb-list.menu-avatar>.hb-list__item .content.flex-sub {
	width: calc(100% - 96rpx - 60rpx - 20rpx);
}

.hb-list.menu-avatar>.hb-list__item .content>view:first-child {
	font-size: 30rpx;
	display: flex;
	align-items: center
}

.hb-list.menu-avatar>.hb-list__item .content .hb-tag.sm {
	display: inline-block;
	margin-left: 10rpx;
	height: 28rpx;
	font-size: 16rpx;
	line-height: 32rpx
}

.hb-list.menu-avatar>.hb-list__item .action {
	width: 100rpx;
	text-align: center
}

.hb-list.menu-avatar>.hb-list__item .action view+view {
	margin-top: 10rpx
}

.hb-list.menu-avatar.comment>.hb-list__item .content {
	position: relative;
	left: 0;
	width: auto;
	flex: 1;
}

.hb-list.menu-avatar.comment>.hb-list__item {
	padding: 30rpx 30rpx 30rpx 120rpx;
	height: auto
}

.hb-list.menu-avatar.comment .hb-avatar {
	align-self: flex-start
}

.hb-list.menu>.hb-list__item {
	position: relative;
	display: flex;
	padding: 0 30rpx;
	min-height: 100rpx;
	background-color: #ffffff;
	justify-content: space-between;
	align-items: center
}

.hb-list.menu>.hb-list__item:last-child:after {
	border: none
}

.hb-list.menu-avatar>.hb-list__item:after,
.hb-list.menu>.hb-list__item:after {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 200%;
	height: 200%;
	border-bottom: 1rpx solid #ddd;
	border-radius: inherit;
	content: " ";
	transform: scale(.5);
	transform-origin: 0 0;
	pointer-events: none
}

.hb-list.menu>.hb-list__item.grayscale {
	background-color: #f5f5f5
}

.hb-list.menu>.hb-list__item.cur {
	background-color: #fcf7e9
}

.hb-list.menu>.hb-list__item.arrow{
    padding-right: 90rpx;
}
.hb-list.menu>.hb-list__item.arrow:before{
    position: absolute;
    top:0;
    right: 30rpx;
    bottom:0;
    display: block;
    margin: auto;
    width: 30rpx;
    height:30rpx;
    color:#8799a3;
    font-family: iconfont;
    content: "\e743";
    font-size: 34rpx;
    text-align: center;
    line-height: 30rpx;
    
}

.hb-list.menu>.hb-list__item button.content {
	padding: 0;
	background-color: transparent;
	justify-content: flex-start
}

.hb-list.menu>.hb-list__item button.content:after {
	display: none
}

.hb-list.menu>.hb-list__item .hb-avatar_group .hb-avatar {
	border-color: #ffffff
}

.hb-list.menu>.hb-list__item .content>view:first-child {
	display: flex;
	align-items: center
}

.hb-list.menu>.hb-list__item .content>text[class*=hb-icon_] {
	display: inline-block;
	margin-right: 10rpx;
	width: 1.6em;
	text-align: center
}

.hb-list.menu>.hb-list__item .content>image {
	display: inline-block;
	margin-right: 10rpx;
	width: 1.6em;
	height: 1.6em;
	vertical-align: middle
}

.hb-list.menu>.hb-list__item .content {
	font-size: 30rpx;
	line-height: 1.6em;
	flex: 1
}

.hb-list.menu>.hb-list__item .content .hb-tag.sm {
	display: inline-block;
	margin-left: 10rpx;
	height: 28rpx;
	font-size: 16rpx;
	line-height: 32rpx
}

.hb-list.menu>.hb-list__item .action .hb-tag:empty {
	right: 10rpx
}

.hb-list.menu {
	display: block;
	overflow: hidden
}

.hb-list.menu.sm-border>.hb-list__item:after {
	left: 30rpx;
	width: calc(200% - 120rpx)
}
.hb-list.grid>.hb-list__item{
    position: relative;
    display: flex;
    padding: 20rpx 0 30rpx;
    transition-duration: 0s;
    flex-direction: column;
}

.hb-list.grid>.hb-list__item:after {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 200%;
	height: 200%;
	border-right: 1px solid rgba(0, 0, 0, .1);
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	border-radius: inherit;
	content: " ";
	transform: scale(.5);
	transform-origin: 0 0;
	pointer-events: none
}

.hb-list.grid>.hb-list__item text {
	display: block;
	margin-top: 10rpx;
	color: #888;
	font-size: 26rpx;
	line-height: 40rpx
}

.hb-list.grid>.hb-list__item [class*=hb-icon_] {
	position: relative;
	display: block;
	margin-top: 20rpx;
	width: 100%;
	font-size: 48rpx
}

.hb-list.grid>.hb-list__item .hb-tag {
	right: auto;
	left: 50%;
	margin-left: 20rpx
}

.hb-list.grid {
	background-color: #ffffff;
	text-align: center
}

.hb-list.grid.no-border>.hb-list__item {
	padding-top: 10rpx;
	padding-bottom: 20rpx
}

.hb-list.grid.no-border>.hb-list__item:after {
	border: none
}

.hb-list.grid.no-border {
	padding: 20rpx 10rpx
}

.hb-list.grid.col-3>.hb-list__item:nth-child(3n):after,
.hb-list.grid.col-4>.hb-list__item:nth-child(4n):after,
.hb-list.grid.col-5>.hb-list__item:nth-child(5n):after {
	border-right-width: 0
}

.hb-list.card-menu {
	overflow: hidden;
	margin-right: 30rpx;
	margin-left: 30rpx;
	border-radius: 20rpx
}
/*======================
        卡片
=======================*/
.hb-card{
    display: block;
    overflow: hidden;
    &__item{
        display: block;
        background-color: #ffffff;
        overflow: hidden;
        border-radius: 10rpx;
        margin: 30rpx;
    }
    &__item.shadow-blur{
        overflow: initial;
    }
    .grid.grid-square {
    	margin-bottom: -20rpx;
    }
}
.hb-card.no-card>.hb-card__item {
	margin: 0rpx;
	border-radius: 0rpx;
}

.hb-card.case {
    .image {
        position: relative;
        image {
        	width: 100%;
        }
        .hb-tag {
        	position: absolute;
        	right: 0;
        	top: 0;
        }
        .hb-bar {
        	position: absolute;
        	bottom: 0;
        	width: 100%;
        	background-color: transparent;
        	padding: 0rpx 30rpx;
        }
    }
}
.hb-card.case.no-card .image {
	margin: 30rpx 30rpx 0;
	overflow: hidden;
	border-radius: 10rpx;
}
.hb-card.dynamic {
	display: block;
    .hb-card__item {
    	display: block;
    	background-color: #ffffff;
    	overflow: hidden;
        .text-content {
        	padding: 0 30rpx 0;
        	max-height: 6.4em;
        	overflow: hidden;
        	font-size: 30rpx;
        	margin-bottom: 20rpx;
        }
        .square-img {
        	width: 100%;
        	height: 200rpx;
        	border-radius: 6rpx;
        }
        .only-img {
        	width: 100%;
        	height: 320rpx;
        	border-radius: 6rpx;
        }
    }
}
.hb-card.article {
	display: block;
    .hb-card__item {
    	padding-bottom: 30rpx;
        .title {
        	font-size: 30rpx;
        	font-weight: 900;
        	color: #333333;
        	line-height: 100rpx;
        	padding: 0 30rpx;
        }
        .content {
        	display: flex;
        	padding: 0 30rpx;
            image {
            	width: 240rpx;
            	height: 6.4em;
            	margin-right: 20rpx;
            	border-radius: 6rpx;
            }
            .desc {
            	flex: 1;
            	display: flex;
            	flex-direction: column;
            	justify-content: space-between;
            }
            .text-content {
            	font-size: 28rpx;
            	color: #888;
            	height: 4.8em;
            	overflow: hidden;
				word-wrap:break-word;
				word-break:break-all;
            }
        }
    }
}
/*======================
        面板
=======================*/
.hb-panel {
	background-color: #fff;
	margin-top:30rpx;
	border-radius: 10rpx;
	border:1px solid #eee;
	overflow: hidden;
	letter-spacing:1rpx;

	&__header-value {
		color: #999
	}

	&__footer {
		padding: 16rpx 32rpx
	}

	& .hb-bar{
		background-color: #fafafa;
		& .action:first-child {
			font-size: 28rpx;
		}
		& .hb-avatar {
			margin-right: 10rpx;
		}
	}

	&.full-screen {
		overflow: hidden;
		margin-right: 30rpx;
		margin-left: 30rpx;
		border-radius: 20rpx;
	}
	&.sm-border>.hb-bar:after{
		left: 30rpx;
	}
}
/*======================
        模态窗口
=======================*/
.hb-modal{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1110;
    opacity: 0;
    outline: 0;
    text-align: center;
    transform: scale(1.185);
    backface-visibility: hidden;
    perspective: 2000rpx;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease-in-out 0s;
    pointer-events: none;
}
.hb-modal::before {
	content: "\200B";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.hb-modal.show {
	opacity: 1;
	transition-duration: 0.3s;
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}
.hb-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 680rpx;
	max-width: 100%;
	background-color: #f8f8f8;
	border-radius: 10rpx;
	overflow: hidden;
}

.hb-modal.bottom-modal::before {
	vertical-align: bottom;
}

.hb-modal.bottom-modal .hb-dialog {
	width: 100%;
	border-radius: 0;
}

.hb-modal.bottom-modal {
	margin-bottom: -1000rpx;
}

.hb-modal.bottom-modal.show {
	margin-bottom: 0;
}

.hb-modal.drawer-modal {
	transform: scale(1);
	display: flex;
}

.hb-modal.drawer-modal .hb-dialog {
	height: 100%;
	min-width: 200rpx;
	border-radius: 0;
	margin: initial;
	transition-duration: 0.3s;
}

.hb-modal.drawer-modal.justify-start .hb-dialog {
	transform: translateX(-100%);
}

.hb-modal.drawer-modal.justify-end .hb-dialog {
	transform: translateX(100%);
}

.hb-modal.drawer-modal.show .hb-dialog {
	transform: translateX(0%);
}
.hb-modal .hb-dialog>.hb-bar:first-child .action{
  min-width: 100rpx;
  margin-right: 0;
  min-height: 100rpx;
}
/*======================
        搜索框
=======================*/
.hb-search{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx 24rpx;
    background-color: @hbie-color-white;
    &__form{
        line-height: 64rpx;
        height: 64rpx;
        font-size: 24rpx;
        color: #333333;
        flex: 1;
        display: flex;
        align-items: center;
        margin: 0 30rpx;
        background-color: #f7f8fA;
        [class*="hb-icon_"] {
        	margin: 0 0.5em 0 0.5em;
            font-size: 36rpx;
        }
        [class*="hb-icon_"]::before {
        	top: 0rpx;
        }
        input{
            flex: 1;
            padding-right: 30rpx;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 26rpx;
            background-color: transparent;
        }
    }
    &__form+.action{
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: center;
        max-width: 100%;
        margin-right:6rpx;
    }
    .action>text[class*="hb-icon_"] {
    	margin-left: 0.3em;
    	margin-right: 0.3em;
    }
}
/*======================
        tab标签页
=======================*/
.hb-tabs {
		position: relative;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;

		&__wrap {
			display: flex;
			overflow: hidden;
		}

		&__nav {
			position: relative;
			display: flex;
			user-select: none;
			max-height: 90rpx;
		}
	}

	.hb-tab {
		height: 90rpx;
		display: inline-block;
		line-height: 90rpx;
		margin: 0 10rpx;
		padding: 0 20rpx;

		&--active {
			font-weight: 500;
			height: 86rpx;
			display: inline-block;
			border-bottom: 4rpx solid;
		}

		&__pane {
			box-sizing: border-box;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}
	}

/*======================
        贴顶部
=======================*/

.hb-bar.fixed,
.hb-search.fixed,
.nav.fixed,
.hb-tabs.fixed{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1024;
	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}
.hb-bar.foot{
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 1024;
	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
}
.hb-bar.tabbar,.hb-bar.operate {
	padding: 0;
	height: calc(100rpx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
/* ==================
         轮播
 ==================== */
swiper .a-swiper-dot {
	display: inline-block;
	width: 16rpx;
	height: 16rpx;
	background: rgba(0, 0, 0, .3);
	border-radius: 50%;
	vertical-align: middle;
}

swiper[class*="-dot"] .wx-swiper-dots,
swiper[class*="-dot"] .a-swiper-dots,
swiper[class*="-dot"] .uni-swiper-dots {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}

swiper.square-dot .wx-swiper-dot,
swiper.square-dot .a-swiper-dot,
swiper.square-dot .uni-swiper-dot {
	background-color: #ffffff;
	opacity: 0.4;
	width: 10rpx;
	height: 10rpx;
	border-radius: 20rpx;
	margin: 0 8rpx !important;
}

swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
	opacity: 1;
	width: 30rpx;
}

swiper.round-dot .wx-swiper-dot,
swiper.round-dot .a-swiper-dot,
swiper.round-dot .uni-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	position: relative;
	margin: 4rpx 8rpx !important;
}

swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
	content: "";
	position: absolute;
	width: 10rpx;
	height: 10rpx;
	top: 0rpx;
	left: 0rpx;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #ffffff;
	border-radius: 20rpx;
}

swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active,
swiper.round-dot .a-swiper-dot.a-swiper-dot-active,
swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
	width: 18rpx;
	height: 18rpx;
}

.screen-swiper {
	min-height: 375rpx;
}

.screen-swiper image,
.screen-swiper video,
.swiper-item image,
.swiper-item video {
	width: 100%;
	display: block;
	height: 100%;
	margin: 0;
	pointer-events: none;
}

.card-swiper {
	height: 420rpx !important;
}

.card-swiper swiper-item {
	width: 610rpx !important;
	left: 70rpx;
	box-sizing: border-box;
	padding: 40rpx 0rpx 70rpx;
	overflow: initial;
}

.card-swiper swiper-item .swiper-item {
	width: 100%;
	display: block;
	height: 100%;
	border-radius: 10rpx;
	transform: scale(0.9);
	transition: all 0.2s ease-in 0s;
	overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
	transform: none;
	transition: all 0.2s ease-in 0s;
}


.tower-swiper {
	height: 420rpx;
	position: relative;
	max-width: 750rpx;
	overflow: hidden;
}

.tower-swiper .tower-item {
	position: absolute;
	width: 300rpx;
	height: 380rpx;
	top: 0;
	bottom: 0;
	left: 50%;
	margin: auto;
	transition: all 0.2s ease-in 0s;
	opacity: 1;
}

.tower-swiper .tower-item.none {
	opacity: 0;
}

.tower-swiper .tower-item .swiper-item {
	width: 100%;
	height: 100%;
	border-radius: 6rpx;
	overflow: hidden;
}
/*======================
        开关
=======================*/

switch{
	position: relative;
}

switch::after,
switch::before {
	font-family: "iconfont";
	content: "\e618";
	position: absolute;
	color: #ffffff !important;
	top: 3rpx;
	left: 0rpx;
	font-size: 26rpx;
	line-height: 26px;
	width: 50%;
	text-align: center;
	pointer-events: none;
	transform: scale(0, 0);
	transition: all 0.3s ease-in-out 0s;
	z-index: 9;
	bottom: 0;
	height: 26px;
	margin: auto;
}

switch::before {
	content: "\e610";
	right: 0;
	transform: scale(1, 1);
	left: auto;
}

switch[checked]::after,
switch.checked::after {
	transform: scale(1, 1);
}

switch[checked]::before,
switch.checked::before {
	transform: scale(0, 0);
}


switch[checked]::before {
	transform: scale(0, 0);
}

switch .wx-switch-input,
switch .uni-switch-input {
	border: none;
	padding: 0 24px;
	width: 48px;
	height: 26px;
	margin: 0;
	border-radius: 100rpx;
}

switch .wx-switch-input:not([class*="bg-"]),
switch .uni-switch-input:not([class*="bg-"]) {
	background: #8799a3 !important;
}

switch .wx-switch-input::after,
switch .uni-switch-input::after {
	margin: auto;
	width: 26px;
	height: 26px;
	border-radius: 100rpx;
	left: 0rpx;
	top: 0rpx;
	bottom: 0rpx;
	position: absolute;
	transform: scale(0.9, 0.9);
	transition: all 0.1s ease-in-out 0s;
}

switch .wx-switch-input.wx-switch-input-checked::after,
switch .uni-switch-input.uni-switch-input-checked::after {
	margin: auto;
	left: 22px;
	box-shadow: none;
	transform: scale(0.9, 0.9);
}

radio-group {
	display: inline-block;
}



switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before,
switch.radius .uni-switch-input::after,
switch.radius .uni-switch-input,
switch.radius .uni-switch-input::before {
	border-radius: 10rpx;
}

switch .wx-switch-input::before,
switch .uni-switch-input::before {
	display: none;
}

switch.red[checked] .wx-switch-input.wx-switch-input-checked,
switch.red.checked .uni-switch-input.uni-switch-input-checked {
	background-color: #e54d42 !important;
	border-color: #e54d42 !important;
	color: #ffffff !important;
}

switch.orange[checked] .wx-switch-input,
switch.orange.checked .uni-switch-input{
	background-color: #f37b1d !important;
	border-color: #f37b1d !important;
	color: #ffffff !important;
}

switch.yellow[checked] .wx-switch-input,
switch.yellow.checked .uni-switch-input {
	background-color: #fbbd08 !important;
	border-color: #fbbd08 !important;
	color: #333333 !important;
}

switch.olive[checked] .wx-switch-input,
switch.olive.checked .uni-switch-input {
	background-color: #8dc63f !important;
	border-color: #8dc63f !important;
	color: #ffffff !important;
}

switch.green[checked] .wx-switch-input,
switch[checked] .wx-switch-input,
switch.green.checked .uni-switch-input,
switch.checked .uni-switch-input{
	background-color: #39b54a !important;
	border-color: #39b54a !important;
	color: #ffffff !important;
	border-color: #39B54A !important;
}

switch.cyan[checked] .wx-switch-input,
switch.cyan.checked .uni-switch-input {
	background-color: #1cbbb4 !important;
	border-color: #1cbbb4 !important;
	color: #ffffff !important;
}

switch.blue[checked] .wx-switch-input,
switch.blue.checked .uni-switch-input {
	background-color: #0081ff !important;
	border-color: #0081ff !important;
	color: #ffffff !important;
}

switch.purple[checked] .wx-switch-input,
switch.purple.checked .uni-switch-input {
	background-color: #6739b6 !important;
	border-color: #6739b6 !important;
	color: #ffffff !important;
}

switch.mauve[checked] .wx-switch-input,
switch.mauve.checked .uni-switch-input {
	background-color: #9c26b0 !important;
	border-color: #9c26b0 !important;
	color: #ffffff !important;
}

switch.pink[checked] .wx-switch-input
switch.pink.checked .uni-switch-input{
	background-color: #e03997 !important;
	border-color: #e03997 !important;
	color: #ffffff !important;
}

switch.brown[checked] .wx-switch-input,
switch.brown.checked .uni-switch-input {
	background-color: #a5673f !important;
	border-color: #a5673f !important;
	color: #ffffff !important;
}

switch.grey[checked] .wx-switch-input,
switch.grey.checked .uni-switch-input {
	background-color: #8799a3 !important;
	border-color: #8799a3 !important;
	color: #ffffff !important;
}

switch.gray[checked] .wx-switch-input,
switch.gray.checked .uni-switch-input {
	background-color: #f0f0f0 !important;
	border-color: #f0f0f0 !important;
	color: #333333 !important;
}

switch.black[checked] .wx-switch-input,
switch.black.checked .uni-switch-input{
	background-color: #333333 !important;
	border-color: #333333 !important;
	color: #ffffff !important;
}

switch.white[checked] .wx-switch-input,
switch.white.checked .uni-switch-input {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #333333 !important;
}



/*======================
        背景颜色
=======================*/
.bg-white {
	background-color: @hbie-color-white;
	color: @hbie-text-color;
}
.bg-green{
    background-color: @hbie-color-success;
    color:@hbie-color-white;
}
.bg-red{
    background-color: @hbie-color-error;
    color:@hbie-color-white;
}
.bg-yellow{
    background-color: @hbie-color-warning;
    color:@hbie-color-white;
}
.bg-blue{
    background-color: @hbie-color-primary;
    color:@hbie-color-white;
}
.bg-light_blue{
    background-color: @hbie-color-info;
    color:@hbie-color-white;
}
.bg-grey {
    background-color: #8799a3;
    color: #ffffff;
}
.bg-orange {
	background-color: #f37b1d;
	color: #ffffff;
}
.bg-gray {
    background-color: #f0f0f0;
    color: #333333;
}

.bg-black {
    background-color: #333333;
    color: #ffffff;
}
.bg-shadeTop {
	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
	color: #ffffff;
}

.bg-shadeBottom {
	background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
	color: #ffffff;
}

/*=========================
        文本
==========================*/
.text-xs{
    font-size: @hbie-font-size-xs;
}
.text-sm{
    font-size: @hbie-font-size-sm;
}
.text-df{
    font-size: @hbie-font-size-base;
}
.text-lg{
    font-size: @hbie-font-size-lg;
}
.text-xl{
    font-size: @hbie-font-size-xl;
}
.text-xxl {
	font-size: 44rpx;
}

.text-sl {
	font-size: 80rpx;
}

.text-xsl {
	font-size: 120rpx;
}

.text-price::before{
    content: "¥";
    font-size: 80%;
    margin-right: 4rpx;
}
.text-cut{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-bold{
    font-weight: bold;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.text-content{
    line-height: 1.6;
}
.text-red,.line-red,.lines-red{
    color:@hbie-color-error
}
.text-blue,.line-blue,.lines-blue{
    color:@hbie-color-primary
}
.text-green,.line-green,.lines-green{
    color:@hbie-color-success
}
.text-yellow,.line-yellow,.lines-yellow{
    color:@hbie-color-warning
}
.text-white,.line-white,.lines-white{
    color:@hbie-color-white
}
.text-black,.line-black,.lines-black{
    color:@hbie-text-color
}
.text-grey,.line-grey,.lines-grey{
    color:@hbie-text-color-grey
}
.text-gray,
.line-gray,
.lines-gray {
	color: #aaa;
}
.text-orange,
.line-orange,
.lines-orange {
	color: #f37b1d;
}

.bg-img{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-mask{
    background-color: @hbie-text-color;
    position: relative;
}
.bg-mask::after {
	content: "";
	border-radius: inherit;
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

.bg-mask view,
.bg-mask cover-view {
	z-index: 5;
	position: relative;
}

.bg-video {
	position: relative;
}

.bg-video video {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
	z-index: 0;
	pointer-events: none;
}